<template>
  <div>
    <div class="main_wrap">
      <div class="header">
        <a href="#" class="logo"
          ><img src="~@/assets/images/logo.png" alt=""
        /></a>
        <div class="copyright">
          CopyRight © 2019 深圳百秀信息技术股份有限公司<br />All Rights Reserved
        </div>
      </div>

      <div class="login_form_con">
        <div class="login_title"></div>
        <form class="login_form">
          <i class="iconfont icon-user"></i>
          <i class="iconfont icon-key"></i>
          <input
            v-model="username"
            type="text"
            class="input_txt"
            placeholder="邮箱/手机号"
          />
          <input
            v-model="password"
            type="password"
            class="input_pass"
            placeholder="密码"
          />
          <input
            @click.prevent="doLogin"
            type="submit"
            class="input_sub"
            value="登 录"
          />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
// 导入接口
import { userLogin } from "./user.js";
// 导入token工具包
import { saveToken } from "@/utils/token.js";
export default {
  name: "login",
  data() {
    return {
      username: "admin",
      password: "123456",
    };
  },
  methods: {
    async doLogin() {
      console.log(this.username, this.password);
      //   (1)发送请求
      let res = await userLogin({
        username: this.username,
        password: this.password,
      });
      if (res.data.code == 200) {
        console.log(res);
        // (2)存储token
        saveToken(res.data);

        //   (3)弹窗提示
        this.$alert("登录成功", "友情提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            // 跳转首页
            this.$router.push("/index");
          },
        });
      } else {
        this.$alert(res.data.msg);
      }
    },
  },
};
</script>

<style>
</style>